<template>
    <div class="Charge">

        <div class="charge-container">
             <el-table
                :data="orderData"
                border
                style="width: 100%">
                <el-table-column
                    
                    label="产品图片"
                    width="100">
                   <template v-slot='{row}'>
                        <img :src="row.orderDetail[0].imageUrl" alt="" style="width: 70px;">
                   </template>
                </el-table-column>
                <el-table-column
                    prop="order_id"
                    label="订单编号"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="orderDetail[0].productName"
                    label="产品名称">
                </el-table-column>
                <el-table-column
                    prop="orderDetail[0].quantity"
                    label="数量">
                </el-table-column>
                <el-table-column
                    prop="total_fee"
                    label="总价格">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="pay_status"
                    label="支付状态">
                    <template v-slot='{row}'>
                        {{row.pay_status === 1 ? '已支付' : '未支付'}}                   
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_status"
                    label="订单状态">
                    <template v-slot='{row}'>
                        <span v-if='row.order_status===0'>未提交</span>
                        <span v-else-if='row.order_status===1'>提交成功</span>
                        <span v-else-if='row.order_status===2'>已经取消</span>
                        <span v-else-if='row.order_status===3'>无效订单</span>
                        <span v-else-if='row.order_status===4'>交易关闭</span>
                        <span v-else-if='row.order_status===5'>退货</span>                     
                    </template>
                </el-table-column>
                <el-table-column
                    prop
                    label="操作">
                    <template v-slot='{row}'>
                        <el-button type="success" icon='iconfont icon-chongzhi' v-hasPay=[row.pay_status,row.order_status]>去支付</el-button>
                        <el-button type="danger" icon='el-icon-delete'>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
import * as api from '@/api/pay'
  export default {
    meta:{
        title:"order",
        name:'订单管理',
        icon:'iconfont icon-dd',
    },
    data() {
        return {
             orderData: []
        }
    },
    mounted(){
        api.getAllorder()
        .then(res=>{
            // console.log('订单',res);
            this.orderData = res.data.data
        })
    },
    directives:{
        hasPay:{
            ////自定义指令   el 指向所在的dom元素  binding 是带数据的对象
            inserted(el,binding){
                ////binding接收的 第一个值是支付状态pay_status   第二个值是订单状态order_status
                ////当 row.pay_status 为 0 的时候是未支付 ， 1 的时候是已支付要禁用按钮
                ////当 row.order_status  为 1 的时候是已提交 不禁用按钮
                // console.log(el);
                let {pay_status,order_status} = binding.value
                if(!(pay_status === 0 && order_status === 1)){
                    el.disabled = true ////禁用开关
                    el.className = el.className + ' ' + 'is-disabled' ////给禁用的开关类名（样式）
                }
            }
        }
    }

  }
</script>

<style lang='less' scoped>    
    .charge-container{
        margin-top: 30px;
        
        /deep/.el-table__header-wrapper{
        
            text-align: center !important;
            line-height: 40px;
            text-align: center;
            /deep/.cell{
                text-align: center;
                .el-button{
                    width: 65px;
                    height: 25px;
                    padding-left: 10px;
                    padding-top:5px;
                }
            }   
        }
        .vip3{
            width: 70px;
            height: 30px;
        }
    }
    /deep/.el-table{
        text-align: center;
        .el-table__cell{
            text-align: center;
        }
    }
</style>